<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>1</button><button>2</button><button>3</button><button>4</button><button>5</button><button>6</button><button>7</button><button>8</button><button>9</button><button>10</button>
  <script>
    const aBtn = document.querySelectorAll('button')
    /* for (var i = 0; i < aBtn.length; i++) {
      aBtn[i].onclick = function () {
        // 这个代码啥时候走的？点击的时候才走？那当你点击的时候 for 循环肯定肯定早就走完了，走完了 i 变成了 aBtn.length 啦
        console.log(i)
      }
    } */
    for (var i = 0; i < aBtn.length; i++) {
      (function (i) {
        aBtn[i].onclick = function () {
          // 这个代码啥时候走的？点击的时候才走？那当你点击的时候 for 循环肯定肯定早就走完了，走完了 i 变成了 aBtn.length 啦
          console.log(i)
        }
      })(i)
    }
  </script>
</body>

</html>